import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { FC } from "react";

type Props = {
  children: JSX.Element;
  id: string;
};

const SortableItem: FC<Props> = (props: Props) => {
  const { children, id } = props;
  const { attributes, listeners, setNodeRef, transition, transform } =
    useSortable({ id });

  const style = {
    transition,
    transform: CSS.Transform.toString(transform),
  };

  return (
    <div>
      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
        {children}
      </div>
    </div>
  );
};

export default SortableItem;
